<template>
  <div id="Application">
    <input type="radio" value="Page1" v-model="currentPage">Page1
    <input type="radio" value="Page2" v-model="currentPage">Page2
    <component :is="currentComponent"></component>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import Page1 from '@/components/chapter08/base/8.1Page1.vue';
import Page2 from '@/components/chapter08/base/8.1Page2.vue';

const currentPage = ref('Page1');
const currentComponent = computed(() => {
  if (currentPage.value === 'Page1') {
    return Page1;
  } else if (currentPage.value === 'Page2') {
    return Page2;
  }
});
</script>